<template>
  <div class="box">
    <div class="center" v-if="this.data">
      <span>
        当前位置:首页>
        <span @click="goBack">珍藏书单 </span>
        >{{ this.data[0].lname }}
      </span>
      <hr />
      <div v-for="items in this.data" :key="items.bid">
        <div class="book">
          <router-link to="/bookdetails" class="left">
            <img :src="items.bsrc" alt="" />
          </router-link>
          <div class="right">
            <router-link to="/bookdetails">
              <h2 class="item">{{ items.bname }}</h2>
            </router-link>
            <h3 class="item">作者:{{ items.author }}</h3>
            简介:
            <p class="item">
              {{ items.bjj }}
            </p>
            <h3 class="item">
              推荐人:{{ items.name }}
              <em
                @click="addGz(items.id)"
                v-once-click
                class="el-icon-message-solid"
              ></em>
            </h3>
            <span class="item"> 推荐语:{{ items.bwords }} </span>
          </div>
        </div>
        <hr />
      </div>
      <div class="top">
        <div class="top-top">
          <h2>猜你喜欢</h2>
          <span @click="getOtherlist" class="top-up">
            换一批
            <em class="el-icon-refresh"></em>
          </span>
        </div>
        <hr />
        <div class="top-center" v-if="this.mbData">
          <div
            class="top-center-inner"
            v-for="(items, index) in mbData"
            :key="items.lid + index"
          >
            <img :src="items.lsrc" alt="" />
            <span>{{ items.lname }}</span>
          </div>
        </div>
      </div>
      <hr />
      <div class="talk">
        <div class="top-top">
          <h2>热门评论</h2>
          <span class="top-up">
            我有一言,请诸位静听! <em class="el-icon-thumb"></em
          ></span>
        </div>
        <hr />
        <div v-for="items in this.chatData" :key="items.bkstkid">
          <div class="down">
            <div class="uheader">
              <img :src="items.rphoto" alt="" />
            </div>
            <div class="utalks">
              <span class="uname">{{ items.rname }}</span>
              <span class="uword">{{ items.reply }}</span>
              <div class="time-pl">
                <span class="two">
                  <em
                    @click="addDz(items.reid)"
                    v-once-click
                    class="el-icon-trophy"
                    >{{ items.rdianzan }}</em
                  >
                </span>
              </div>
            </div>
          </div>
          <hr />
        </div>
        <div class="pagination">
          <button @click="minusPage" :disabled="this.page == 1">上一页</button>
          <span>{{ page }}</span>
          <button @click="addPage" :disabled="this.maxPage == page">
            下一页
          </button>
          <span>共{{ maxPage }}页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      chatData: "",
      mbData: "",
      page: 1,
      maxPage: 1,
    };
  },

  mounted() {
    this.getData();
    this.getChat();
    this.getOtherlist();
  },
  methods: {
    // 挂载时(页面出生,显示),自动触发请求
    // 发送请求
    getData() {
      const url =
        `http://127.0.0.1:3000/v1/library/booksdetails/` +
        this.$route.params.id;
      console.log(url);
      this.axios.get(url).then((res) => {
        this.data = res.data;
        console.log("this.data:", this.data);
      });
    },
    getChat() {
      const url =
        `http://127.0.0.1:3000/v1/library/bookschat/` + this.$route.params.id;
      console.log(url);
      this.axios.get(url).then((res) => {
        this.chatData = res.data;
        console.log("this.chatData:", this.chatData);
      });
    },
    getOtherlist() {
      const url2 = "http://127.0.0.1:3000/v1/library/booklist";
      console.log(url2);
      this.axios.get(url2).then((res) => {
        console.log("res.data:", res.data);
        this.mbData = res.data;
        console.log("this.mbData:", this.mbData);
        this.num = Math.floor(Math.random() * (this.mbData.length - 6));
        console.log(this.num);
        this.mbData = this.mbData.slice(this.num, this.num + 5);
        console.log("this.mbData:", this.mbData);
      });
    },
    addGz(id) {
      const url4 = "http://127.0.0.1:3000/v1/library/updateguanzhu";
      const params = `id=${id}`;
      console.log(url4, params);
      this.axios.put(url4, params).then((res) => {
        console.log("关注成功！");
      });
    },
    addDz(reid) {
      const url4 = "http://127.0.0.1:3000/v1/library//booksdetails/updatechat";
      const params = `reid=${reid}&bid=${this.$route.params.id}`;
      console.log(url4, params);
      this.axios.put(url4, params).then((res) => {
        console.log("点赞成功！");
        this.getChat();
      });
    },
    goBack() {
      this.$router.back();
    },
    addPage() {
      this.page += 1;
    },
    minusPage() {
      this.page -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  user-select: none;
}
*a {
  text-decoration: none;
  color: #000;
}
.box {
  width: 1200px;
  margin: 0 auto;
  .center {
    display: flex;
    flex-direction: column;

    > span {
      margin: 15px 20px;
    }

    .book {
      width: 1200px;
      display: flex;
      .left {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      img {
        height: 450px;
        width: 350px;
      }
      .right {
        display: flex;
        flex-direction: column;
        margin: 15px 20px;
        .item {
          margin: 25px 0;
        }
        p {
          line-height: 150%;
          text-indent: 30px;
        }
        h3 {
          display: flex;
          justify-content: flex-end;
        }
      }
    }

    .top {
      width: 1200px;

      .top-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 20px;
      }
      .top-up {
        display: flex;
        justify-content: flex-end;
      }
      .top-center {
        display: flex;
        justify-content: space-between;
        img {
          width: 230px;
          height: 320px;
        }
        .top-center-inner {
          display: flex;
          flex-direction: column;
          // width: 19%;
          span {
            text-align: center;
            margin: 15px 0;
          }
        }
      }
    }

    .talk {
      width: 1200px;

      .top-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
          margin: 10px 20px;
        }
        .top-up {
          margin: 10px;
          padding: 10px;
          border-radius: 5px;
          background-color: #46aaff;
          color: white;
        }
      }
      .more {
        text-align: center;
        margin: 15px 0;
      }
    }
  }
}

.down {
  width: 100%;
  display: flex;
  img {
    width: 50px;
    height: 50px;
    margin: 20px;
    border-radius: 50%;
  }
  .utalks {
    width: 100%;
    display: flex;
    flex-direction: column;
    .uname {
      font-size: 14px;
      color: #999;
      margin: 20px 0;
    }
    .uword {
      margin: 15px 0;
      padding-right: 20px;
    }

    .time-pl {
      width: 100%;
      display: flex;
      justify-content: flex-end;

      .two {
        em {
          padding: 0 20px 15px 0;
        }
      }
    }
  }
}
.more {
  text-align: center;
  margin: 15px 0;
}

.pagination {
  text-align: center;
  padding: 15px;
  span {
    padding: 0 15px;
  }
  button {
    border-color: hsla(0, 0%, 100%, 0.5);
    border-radius: 5px;
    padding: 5px;
    // border: none;
    // outline: none;
  }
  button:hover {
    background-color: blue;
  }
}
</style>
